<template>
  <el-container style="height: 100%;">
    <el-header style="background: #42b983">
      <h3 style="float: left">后台信息管理</h3>
      <h3 style="float: right">退出登录</h3>
    </el-header>
    <el-container>
      <el-aside width="200px" >
        <div class="left" style="width: 200px;height: 100%;">
          <el-row style="width: 200px;height: 100%;" :style="backgroundDiv">
            <el-col>
              <el-menu
                  style="text-align: left;margin-top: 10px"
                  default-active="1"
                  background-color="transparent"
                  :router="true"
              >
                    <span  v-for="(tiem,leftListindex) of leftList" :key="leftListindex">
                       <el-menu-item
                           :index="leftList[leftListindex].myluyou">
                      <i :class="tiem.icfon"></i>
                      <span slot="title"  >
                        {{ tiem.name }}
                      </span>
                    </el-menu-item>
                    </span>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </el-aside>
      <el-main style=";margin: 0;padding: 0;width: 100%;height: 100%;">
        <div class="right" style="width: 100%;height: 100%;">
          <transition mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>


export default {
  name: "",
  data() {
    return {
      backgroundDiv: {
        backgroundImage: 'url(' + require('../../img/ang.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },

      leftList:[
        {
          icfon:'el-icon-setting',
          myluyou:'adminUser',
          name:'用户管理'
        },
        {
          icfon:'el-icon-setting',
          myluyou:'adminSong',
          name:'歌曲管理'
        },

      ]
    };

  },
  methods: {

    clicks(path){
      this.$router.push(path)
    }
  },
  components: {

  }
}
</script>

<style scoped>

</style>